<template>
	<view>
		<view class="bgBox">
			<view class="flex">
				<image class="backIcon" src="../../static/images/jiantouLeft.png" mode="" @click="intoBack"></image>
				<view class="navTitle">加油站</view>
			</view>
			<view >
			        <swiper class="swiper"
			          indicator-dots
			          indicator-active-color="#FFFFFF"
			          circular
			          autoplay
			        >
			            <swiper-item class="swiper-item uni-bg-red"
			              v-for="item in banners"
			              :key="item.id"
			            >
			                <image :src = "item.url" class="swiper-img"></image>
			            </swiper-item>
			        </swiper>
			    </view>
			<view class="infoBox flex-col bb">
				<view class="name">{{parkInfo.name}}</view>
				<view class="address flex">
					<view>地址:{{parkInfo.addr_address}}</view>
				</view>
				<view class="spaces flex">
					<image src="../../static/images/time@2x.png" mode="" style="width: 32rpx; height: 32rpx" />
					<view style="margin-left: 8rpx">品牌：{{parkInfo.cate_name }}</view>
					<image src="../../static/images/chewei@2x.png" mode=""
						style="width: 32rpx; height: 32rpx; margin-left: 10rpx" />
					<view style="margin-left: 8rpx;color: #ff0000;">今日油价{{parkInfo.prices}} |
						优惠{{parkInfo.down_prices}}</view>
				</view>
				<view class="price flex 
				 flex-row-between">
					<view class="flex distance">
						<image src="../../static/images/daohang@2x.png" mode="" style="width: 32rpx; height: 32rpx">
						</image>
						<view>名称:{{parkInfo.name }}</view>
					</view>
				</view>
				<view class="line"></view>
			</view>
		</view>
<!-- 		<view class="feeBox bb">
			<view class="name">临停费用</view>
			<view class="feeBox_item2 bb flex flex-row-between" v-for="item in rulesList" :key="item.id">
				<view style="font-size: 24rpx;color: #434343;font-weight: 500;">
					{{item.startTimeString + ' - ' + item.endTimeTimeString}}
				</view>
				<view style="font-size: 24rpx;color: #434343;font-weight: 500;">￥{{item.fee}}/小时</view>
			</view>
		</view>
		<uni-safe-area>
			<view class="bottomBox bb flex flex-col-center flex-row-between">
				<view class="left flex flex-col-center flex-row-center" @click="onNavigation">
					<image src="../../static/images/feiji@2x.png" mode=""></image>
					<view class="text">导航</view>
				</view>
			</view>
		</uni-safe-area> -->
		<view class="payBox">
			<view class="flex-col">
				<view class="flex totalBox">
					<view class="left">输入加油机金额<uni-number-box style="width: 120upx;" :min="0.01" :max="99999" :float="digit" :disablePlus="true" :decimal-length="2" :step="0.01" :disableMinus="true" :longPress="false" v-model="payvalue" :asyncChange="true" @focus="focus" @change="onChange"></uni-number-box></view>
					<view class="right" @click="onTest">优惠后¥<text v-model="dvalue" class="dvalue">{{dvalue}}</text></view>
				</view>
				<view class="onpay">
					<button class="pay" @click="onPay">
						立即支付
					</button>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
		
			<!-- #endif -->
		</view>
	</view>
	
	
	
</template>

<script>
	import {
		getCarParkInfoById,
		getChargingRulesListByQuery,
		payCarParkUseLogOrder,
		getCarParkPackageProductListByQuery,
		parkingDataReporting,
		bannerGet
	} from '../../network/api.js'
	export default {
		data() {
			return {
				id:'',
				user_id: uni.getStorageSync('user_id'),
				driving_license: uni.getStorageSync('user')['driving_license'],
				payvalue:0, //输入的支付金额
				dvalue:0, //优惠后的实际支付金额
				parkInfo: {
					name: '',
					addr_address: '',
					cate_name: '',
					prices: '',
					down_prices: '',
					distance: 0,
				},
				locationInfo: {
					longitude: "",
					latitude: "",
				},
				banners:{
					
				}
			}
		},
		onShow() {
			//this.onPhone()
		},
		onLoad(e) {
			this.id = e.id
			//this.onPhone()
			this.getLocation()
			this.fenchData()
			this.getBanner()
			
			// this.fenchRulesData()
		},
		methods: {
			getLocation() { 
				uni.getLocation({
					type: "wgs84",
					success: (res) => {
						console.log("当前位置的经度：" + res.longitude);
						console.log("当前位置的纬度：" + res.latitude);
						this.locationInfo.longitude = res.longitude;
						this.locationInfo.latitude = res.latitude;
						//this.fenchData()
					},
				});
			},
			async getBanner(){
				const {
					data,
					code,
					message
				} = await bannerGet()
				// console.log(data);
				if (code === 200) {
					this.banners = data
				}
			},
			async focus(){
				this.payvalue=0
			},
			async onChange(e){
				const {
					data,
					code,
					message
				} = await getCarParkPackageProductListByQuery({
					dept_id: this.id,
					prices: e
				})
				console.log(data, code);
				if (code == 200) {
					this.dvalue = data
				} else {
					uni.showToast({
						title: '获取加油站优惠失败',
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 1500);
				}
			},
			intoBack() {
				uni.navigateBack()
			},
			onTest(){
				// uni.reLaunch({
				// 	url: '/pages/pay/paymentComplete?price=100&order_id=34&out_trade_no=171648193534372835'
				// })
			},
			onPhone(){
				let that = this;
				if(!that.user_id  || !that.driving_license){
					uni.showToast({
					    title: '请完善电话号码和行驶证！',
					    duration: 3000
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/my/setMyInfo'
						});
					}, 800)
					
				}
			},
			onNavigation() {
				uni.openLocation({
					latitude: this.parkInfo.positionY,
					longitude: this.parkInfo.positionX,
					name: this.parkInfo.name,
					addr_address: this.parkInfo.addr_address,
					success: function() {
						console.log('success');
					}
				});
			},
			async onPay() {
				let that = this;
				if(!that.user_id  || !that.driving_license){
					uni.showToast({
					    title: '请完善电话码和行驶证！',
						icon:'none',
					    duration: 1500
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/my/setMyInfo'
						});
					}, 1500)
					return
				}
				const {
					data,
					code,
					message
				} = await payCarParkUseLogOrder({
					user_id: that.user_id,
					prices: that.payvalue,
					dept_id: that.id
				})
				if (code === 200) {
					if (data == null) {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					} else {
						var _this = this;
						let orderInfo = data.result;
						console.log(789,orderInfo);
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: orderInfo.timeStamp,
							nonceStr: orderInfo.nonceStr,
							package: orderInfo.package,
							signType: orderInfo.signType,
							paySign: orderInfo.paySign,
							success: function(res) {
								if (res.errMsg == 'requestPayment:ok') {
									
									uni.reLaunch({
										url: '/pages/pay/paymentComplete?price=' + _this.dvalue + '&order_id=' + data.order_id + '&out_trade_no=' + data.out_trade_no
									})
								}
							},
							fail: function(err) {
								uni.showToast({
									title: err,
									icon: 'none'
								})
								console.log(err);
							}
						});
					}
				} else {
					uni.showToast({
						title: message,
						icon: 'none'
					})
				}
			},
			async fenchData() {
				const {
					data,
					code
				} = await getCarParkInfoById({
					id: this.id,
					positionX: this.locationInfo.longitude,
					positionY: this.locationInfo.latitude,
				})
				console.log(data, code);
				if (code == 200) {
					this.parkInfo = data
				} else {
					uni.showToast({
						title: '获取加油站详情失败',
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 1500);
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F7FF;
		padding-bottom: 200rpx;
	}
	
	.payBox {
		width: 686rpx;
		height: 252rpx;
		background: #2B3041;
		border-radius: 20rpx;
		position: relative;
		left: 32rpx;
		margin-top: 380rpx;
	
	}
	.swiper{
		width: 100%;
		margin-top: 20rpx;
		height: 365rpx;
	}
	.swiper-img{
		width: 750rpx;
		height: 355rpx;
		margin-top: 10rpx;
	}
	.pay {
		width: 222rpx;
		height: 96rpx;
		background: linear-gradient(270deg, #F3DBA6 0%, #E2B46D 100%);
		border-radius: 48rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #5E3400;
		line-height: 96rpx;
		text-align: center;
		margin: 28rpx 44rpx 0 0;
	}

	element.style {
		background: #f5f5f5;
		color: #333;
	}
	.bottomBox {
		width: 750rpx;
		height: 165rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -12rpx 14rpx 0rpx rgba(222, 220, 238, 0.5);
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0 32rpx;
		overflow: hidden;
		padding-bottom: 20rpx;

		.left {
			width: 332rpx;
			height: 100rpx;
			background: rgba(03, 148, 246, 0.18);
			border-radius: 10rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.text {
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 600;
				color: #6794F6;
				line-height: 50rpx;
				margin-left: 12rpx;
			}
		}

		.right {
			width: 332rpx;
			height: 100rpx;
			background: #6794F6;
			border-radius: 10rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.text {
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 50rpx;
				margin-left: 12rpx;
			}
		}
	}

	.totalBox {
		.left {
			font-size: 32rpx;
			font-weight: 600;
			width: 280rpx;
			color: #FFFFFF;
			margin: 6rpx 0 0 28rpx;
		}

		.right {
			font-size: 32rpx;
			font-weight: 600;
			color: #EFB25A;
			width: 380rpx;
			margin: 50rpx 0 0 120rpx;
		}
		
		
	}
		.onpay{
			margin: 20rpx 0 0 200rpx;
		}
	.discount {
		height: 84rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 34rpx;
		margin: 0rpx 0 0 58rpx;
		opacity: .7;
		margin-top: 32rpx;
		
		.dvalue{
			
		}
	}
	.imageBox {
		width: 686rpx;
		height: 216rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 32rpx;
	}
	

	.feeBox {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 32rpx 0 0 32rpx;
		padding: 32rpx;

		.feeBox_item2 {
			width: 622rpx;
			height: 70rpx;
			background: #F8F8F8;
			border-radius: 8rpx;
			margin-top: 28rpx;
			padding: 20rpx 24rpx;
		}

		.feeBox_item1 {
			width: 622rpx;
			height: 64rpx;
			background: rgba(255, 103, 103, 0.15);
			border-radius: 10rpx;
			border: 2rpx solid rgba(255, 103, 103, 0.32);
			margin-top: 24rpx;
			font-size: 24rpx;

			font-weight: 400;
			color: #FF6767;
			line-height: 64rpx;
			padding-left: 26rpx;
		}

		.name {
			height: 50rpx;
			font-size: 36rpx;
			font-weight: 600;
			color: #323233;
			line-height: 50rpx;
		}
	}

	.scrollViewImage {
		width: 262rpx;
		height: 152rpx;
		border-radius: 16rpx;
		margin: 32rpx 0 0 32rpx;
		display: inline-block;
	}

	.price {
		margin-top: 24rpx;

		.distance {
			view:nth-child(2) {
				height: 34rpx;
				font-size: 24rpx;

				font-weight: 400;
				color: #434343;
				line-height: 34rpx;
				margin-left: 8rpx;
			}
		}
	}

	.bgBox {
		width: 750rpx;
		height: 666rpx;
		background: linear-gradient(360deg, #F5F7FF 0%, #A6C1FB 100%);

		.backIcon {
			width: 64rpx;
			height: 64rpx;
			margin: 100rpx 0 0 32rpx;
		}

		.navTitle {
			width: 160rpx;
			height: 56rpx;
			font-size: 40rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 56rpx;
			margin: 100rpx 0 0 190rpx;
		}

		.infoBox {
			width: 686rpx;
			height: 415rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 120rpx 0 0 32rpx;
			padding: 32rpx;

			.line {
				width: 630rpx;
				opacity: 0.43;
				border: 2rpx dashed #979797;
				margin: 42rpx 0 0 0;
			}

			.name {
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 600;
				color: #323233;
				line-height: 50rpx;
			}

			.address {
				margin-top: 8rpx;

				view:nth-child(1) {
					width: 514rpx;
					height: 32rpx;
					font-size: 24rpx;

					font-weight: 400;
					color: #434343;
					line-height: 34rpx;
				}
			}

			.spaces {
				height: 32rpx;
				font-size: 24rpx;

				font-weight: 400;
				color: #323233;
				line-height: 32rpx;
				margin-top: 16rpx;
			}
		}
	}
	
	
</style>